<template>
  <div class="container">
    <div class="cart">
      <!-- 购物车标题 -->
      <div class="title">{{ title }}的购物车</div>

      <!-- 商品列表 -->
      <div v-for="item in list" :key="item.id" class="item">
        < img :src="item.imgSrc" />
        <div class="name">{{ item.pname }}</div>
        <div class="price">￥{{ item.price }}</div>
        <div class="change">
          －
          <input type="text" class="num" :value="item.count" readonly />
          ＋
        </div>
        <div class="rowPrice">￥{{ item.price * item.count }}</div>
        <div class="del" @click="deleteGood(item.id)">×</div>
      </div>

      <!-- 总价和结算按钮 -->
      <div class="total">
        <span>总价：￥{{ totalPrice }}</span>
        <button>结算</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed  } from 'vue';
export default {
  name: 'App',
  setup() {
    // 定义标题和商品列表的响应式数据
    const title = ref('张三');
    const list = ref([
      { id: 333, price: 200, pname: 'tcl', imgSrc:'https://i.ibb.co/DVp2PjF/1.png', count: 1 },
      { id: 323, price: 100, pname: 'apple', imgSrc: 'https://i.ibb.co/LYDFm6s/2.png', count: 2 },
      { id: 313, price: 300, pname: 'haier', imgSrc: 'https://i.ibb.co/SJM6JnJ/3.png', count: 1 },
      { id: 133, price: 350, pname: 'xiaomi', imgSrc: 'https://i.ibb.co/gDS8sNf/4.png', count: 10 },
      { id: 233, price: 150, pname: 'pptv', imgSrc: 'https://i.ibb.co/SmYRmZS/5.png', count: 11 },
    ]);

    // 更新商品数量
    const updateCount = (id, val) => {
      const index = list.value.findIndex(item => item.id === id);
      list.value[index].count += val;

      // 最小数量不能小于 1
      if (list.value[index].count < 1) {
        list.value[index].count = 1;
        alert('购买数量不能小于 1');
      }
    };

    // 删除商品
    const deleteGood = (id) => {
      const index = list.value.findIndex(item => item.id === id);
      list.value.splice(index, 1);
    };

    // 计算总价
    const totalPrice = computed(() => {
      return list.value.reduce((total, item) => total + item.price * item.count, 0);
    });

    return {
      title,
      list,
      updateCount,
      deleteGood,
      totalPrice
    };
  }
};
</script>

<style scoped>
.container .cart {
  width: 450px;
  margin: auto;
}

.container .title {
  background-color: lightblue;
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.container .total {
  background-color: #FFCE46;
  height: 50px;
  line-height: 50px;
  text-align: right;
}

.container .total button {
  margin: 0 10px;
  background-color: #DC4C40;
  height: 35px;
  width: 80px;
  border: 0;
}

.container .total span {
  color: red;
  font-weight: bold;
}

.container .item {
  height: 55px;
  line-height: 55px;
  position: relative;
  border-top: 1px solid #ADD8E6;
}

.container .item img {
  width: 45px;
  height: 45px;
  position: relative;
  left: 5px
  /* margin: 5px; */
}

.container .item .name {
  position: absolute;
  width: 45px;
  top: 0;
  left: 55px;
  font-size: 16px;
}

.container .item .price {
  position: absolute;
  width: 45px;
  top: 0;
  left: 100px;
  font-size: 16px;
}

.container .item .change {
  width: 100px;
  position: absolute;
  top: 0;
  right: 150px;
}

.container .item .change a {
  font-size: 20px;
  width: 30px;
  text-decoration: none;
  background-color: lightgray;
  vertical-align: middle;
}

.container .item .change .num {
  width: 40px;
  height: 25px;
}

.container .item .rowPrice {
  position: absolute;
  width: 100px;
  top: 0;
  right: 50px;
  font-size: 16px;
}

.container .item .del {
  position: absolute;
  top: 0;
  right: 0px;
  width: 40px;
  text-align: center;
  font-size: 40px;
  cursor: pointer;
  color: red;
}

.container .item .del:hover {
  background-color: orange;
}
</style>